<template>
  <t-card class="dashboard-detail-card" :style="{ height: '418px' }">
    <div class="card-box">
      <div class="hw-flex-style-b-c">
        <div class="top-item hw-flex-style-b-c">
          <div class="item-left">
            <span class="left-title">今日访问量</span>
            <div class="btm-text" v-if="props.info.browse">
              <span class="number-text" v-if="props.info && props.info.browse">{{ props.info.browse.today }}</span>
              <span>
                较昨日
                <span class="up-title" v-if="props.info.browse.yesterday > 0"
                  >{{ props.info.browse.yesterday }}% ↑</span
                >
                <span class="down-title" v-else-if="props.info.browse.yesterday < 0"
                  >{{ Math.ceil(props.info.browse.yesterday) }}% ↓</span
                >
                <span class="down-title" v-else>---</span>
              </span>
            </div>
          </div>
          <div class="item-right">
            <img src="../../../../../assets/img/listicon1.png" alt="" />
          </div>
        </div>
        <div class="solid"></div>
        <div class="top-item hw-flex-style-b-c">
          <div class="item-left">
            <span class="left-title">累计访问量</span>
            <div class="">
              <span class="number-text" v-if="props.info && props.info.browse">{{ props.info.browse.total }}</span>
            </div>
          </div>
          <div class="item-right">
            <img src="../../../../../assets/img/listicon2.png" alt="" />
          </div>
        </div>
      </div>
      <div style="margin-top: 32px" class="echart-box">
        <span class="canvas-title">近7日访问量趋势</span>
        <div class="echart-box-item">
          <overviewCardEcharts
            style="margin-top: -20px"
            v-if="props.info && props.info.browse"
            :info="props.info.browse"
          />
        </div>
      </div>
    </div>
  </t-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import overviewCardEcharts from './overviewCardEcharts.vue';

const props = defineProps({
  info: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.card-box {
}
.top-item {
  width: 46%;
}
.left-title {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
}
.solid {
  width: 1px;
  height: 72px;
  background: rgba(230, 230, 230, 0.5);
}
.number-text {
  font-size: 32px;
  font-family: DIN-Medium, DIN;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  line-height: 48px;
  margin-right: 8px;
}
.btm-text {
  display: flex;
  align-items: center;
}
.item-right {
  img {
    width: 54px;
    height: 54px;
  }
  width: 54px;
  height: 54px;
}
.up-title {
  color: #e34d59;
}
.down-title {
  color: #067945;
}
.canvas-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
}
.echart-box {
}
.echart-box-item {
}
</style>
